<template>
	<view>
		<view class="flex align-center py-2"  >
			<view class="flex-1  flex align-center justify-center " v-for="(item,index) in tabBars" :key="index" @click="changeTab(index)"
			 :class="tabindex===index ? 'font-lg font-weight-bold text-main':'font-md'">
				{{item.name}}
				<text v-if="item.num>0" class="ml-2">{{item.num}}</text>
			</view>

		</view>

		<!-- 列表 -->
		<swiper :duration="150" :current="tabindex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<!-- 横向滚动数据  好比轮播图 -->
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view :style="'height:'+scrollH+'px;'" scroll-y="true" @scrolltolower="loadmore(index)">
					<!-- 如果数组有数据显示内容 -->
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 显示数据 列表样式-->
							<user-list :item="item2" :index="index2"></user-list>

						</block>
						<!-- 下拉加载 -->
						<load-more v-if="item.list.length>10" :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 如果数组为空显示暂无数据 -->
					<template v-else>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
		avatar: "/static/default.jpg",
		username: "昵称",
		sex: 1, //0未知  1女 2男🚹
		age: 24,
		isFollow: true
	}, {
		avatar: "/static/default.jpg",
		username: "昵称",
		sex: 2,
		age: 24,
		isFollow: false
	}]
	import loadMore from '@/components/common/load-more.vue'
	import userList from '@/components/user-list/user-list.vue'
	export default {
		components: {
			loadMore,
			
			userList
		},
		data() {
			return {
				scrollH: 500, //可视区域的高度,,
				tabindex: 0,
				newsList: [],
				tabBars: [{
					name: "互关",
					num: 0
				}, {
					name: "关注",
					num: 10
				}, {
					name: "粉丝",
					num: 30
				}],
			}
		},
		// 监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search'
			})
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap() {
			// 由于就一个按钮不需要获取他的event的index
			uni.navigateBack({
				delta: 1
			})
		},
		// pages.json的里面设置取消返回按钮无效的解决方案
		mounted() {
			document.querySelector('.uni-page-head-hd').style.display = 'none'
		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.scrollH = res.windowHeight - uni.upx2px(100);
				}
			});
			// 根据导航栏生成列表数据
			this.getData();
		},
		methods: {
			getData() {
				// 有几个列表就生成多少数据
				var arr = [];
				for (let i = 0; i < this.tabBars.length; i++) {
					let obj = {
						list: [],
						loadmore: "上拉加载更多",
					};
					if (i < 2) {
						// obj.list = demo;
						obj.list = demo;
					}
					// 意思是
					// let obj = {
					// 	list: [1,2,3,4,5,6],
					// 	loadmore: "上拉加载更多",
					// };
					// let obj = {
					// 	list: [1,2,3,4,5,6],
					// 	loadmore: "上拉加载更多",
					// };
					// let obj = {
					// 	list: [],
					// 	loadmore: "上拉加载更多",
					// };..............................等
					// newsList:[{
					// 	list: [1,2,3,4,5,6],
					// 	loadmore: "上拉加载更多",
					// }，{
					// 	list: [1,2,3,4,5,6],
					// 	loadmore: "上拉加载更多",
					// }，{
					// 	list: [1,2,3,4,5,6],
					// 	loadmore: "上拉加载更多",
					// }]
					arr.push(obj);
					this.newsList = arr;
					console.log(arr)
				}
			},
			changeTab(index) {
				console.log(index)
				this.tabindex = index;
			},
			// 内容区域滑动改变顶部导航栏滑动
			onChangeTab(e) {
				console.log(e)
				this.changeTab(e.detail.current)
			},
			// 上拉加载
			loadmore(index) {
				console.log(index)
				// 拿到当前列表-对象
				let item = this.newsList[index];
				// 防止触底一直请求数据  !== '上拉加载更多'意思在加载中就什么也不做
				if (item.loadmore !== '上拉加载更多') return;
				item.loadmore = '加载中...';
				setTimeout(() => {
					item.list = [...item.list, ...item.list]
					this.newsList[index].loadmore = '上拉加载更多';

				}, 3000)


			},

		},

	}
</script>

<style>

</style>
